<template>
  <iframe class="pt-iframe" :src="src" frameborder="0"></iframe>
</template>
<script>
import { mapGetters } from "vuex";
import { getTreeData, getQueryObject, formateObjToParamStr } from "@/util/util";
export default {
  name: "frame",
  computed: {
    ...mapGetters(["visitedViews", "menu", "access_token", "project", "navList"])
  },
  data () {
    return {
      src: ""
    };
  },
  created () {
    let { fullPath, query } = this.$route;
    console.log(this.$route);
    let params = {
      projectCode: this.project,
      token: "Bearer " + this.access_token,
      projectNo: this.project.projectNo
    };
    let id = this.$route.params.id;
    console.log(this.navList);
    let currentMenu = query.isNotMenu ? getTreeData(this.navList, id, "id") : getTreeData(this.menu, id, "id");
    console.log(currentMenu);
    this.$store.commit("tagsView/SET_TAG_TITLE", { path: fullPath, title: currentMenu.name });
    this.src = this.changeUrl(currentMenu.path, params);
  },
  methods: {
    changeUrl (url, params) {
      let queryObj = getQueryObject(url);
      let targetUrl = url.split("?")[0];
      for (let key in queryObj) {
        if (queryObj[key] && queryObj[key].indexOf("{") === 0) {
          let str = queryObj[key].replace(/(^{*)|(}*$)/g, "");
          if (params.hasOwnProperty(str)) {
            queryObj[key] = params[str];
          }
        }
      }
      if (!queryObj.token) {
        queryObj.token = params.token;
      }
      let str = formateObjToParamStr(queryObj);
      return `${targetUrl}?${str}`;
    }
  }
};
</script>
<style lang="less" scoped>
.pt-iframe {
  width: 100%;
  height: 100%;
}
</style>
